<script setup lang="ts">
import type { ECOption } from '@/components/Echarts/config'
import echarts from '@/components/Echarts/config'
import Echarts from '@/components/Echarts/index.vue'

import worldJSON from '@/assets/map/world.json'

import demoData from '@/assets/map/output5.json'

echarts.registerMap('world', worldJSON as any)

const option: ECOption = {
  progressive: 20000,
  backgroundColor: '#111',
  title: {
    text: '',
    textStyle: {
      color: '#00c7ff',
    },
  },
  geo: {
    center: [-74.04327099998152, 40.86737600240287],
    zoom: 10,
    map: 'world',
    roam: true,
    silent: true,
    //地图位置
    left: '-50%',
    top: '60%',
    // 地图文字设置
    label: {
      show: true,
      color: 'white',
      fontSize: 8,
    },
    itemStyle: {
      color: '#282e39',
      // 边框设置样式
      borderColor: 'rgba(255,255,255,0.5)',
      normal: {
        areaColor: '#323c48',
        borderColor: '#111',
      },
      emphasis: {
        areaColor: '#2a333d',
      },
    },
    // 地图高亮效果
    emphasis: {
      itemStyle: {
        color: '#1369CD',
      },
      label: {
        color: '#82B9F8',
      },
    },
  },
  series: [
    // {
    //   type: 'effectScatter',
    //   coordinateSystem: 'geo',
    //   data: demoData as any,
    //   symbolSize: 1,
    //   geoIndex: 0,
    //   rippleEffect: {
    //     brushType: 'stroke',
    //   },
    //   itemStyle: {
    //     color: '#ffff44',
    //   },
    // },
    {
      name: '弱',
      type: 'scatterGL' as any,
      progressive: 1e6,
      coordinateSystem: 'geo',
      symbolSize: 3,
      blendMode: 'lighter',
      large: true,
      itemStyle: {
        color: 'rgb(20, 15, 2)',
      },
      silent: true,
      dimensions: ['lng', 'lat'],
      data: demoData as any,
    },
  ],
}
</script>

<template>
  <div class="normal-map">
    <h1>常规请求方式</h1>
    <div class="map-container">
      <Echarts :option="option" resize />
    </div>
  </div>
</template>

<style scoped>
.normal-map {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  background-color: #f5f5f5;
}

.map-container {
  width: 100%;
  height: 900px;
  background-color: #ffffff;
}
</style>
